<template>
	<view>
		<!-- 头部导航 -->
		<view class="status_bar">
			<!-- 状态栏 -->
		</view>
		<!-- titile -->
		<view class="login-title">
			<view class="login-title1">忘记密码</view>
			<view class="login-title2"></view>
		</view>
		<!-- 输入框 -->
		<view class="shoujihao">
			<text>+86</text>
			<image src="" mode=""></image>
			<input type="text" value="" placeholder="请输入手机号" placeholder-class="sjhinput" v-model="shouji"
				@blur="goYanzhengma" />
		</view>
		<view class="shoujihao">
			<text>图片验证码</text>
			<image src="" mode=""></image>
			<input type="text" value="" placeholder="请输入图片验证码" placeholder-class="sjhinput2" v-model="tucode" />

		</view>
		<view class="">
			<image @click="goClicktu" mode="" :src='tuimgs' class="tuimgs" v-if="iscodetu1==2"></image>
		</view>
		<view class="yanzhengma">
			<text style="margin-right: 45rpx;">验证码</text>
			<input type="text" value="" placeholder="请输入验证码" placeholder-class="sjhinput" style="width: 200rpx;"
				v-model="yanzhengma" />
			<button class="yzm" @click="getCode" :disabled="btnDis">{{btnText}}</button>
		</view>
		<!-- <view class="yanzhengma">
         <text style="margin-right: 60rpx;">旧密码</text>
        
         <input type="password" value=""  placeholder="请输入6～16位英文字母或数字" placeholder-class="sjhinput"/>
       </view> -->
		<view class="yanzhengma">
			<text style="margin-right: 60rpx;">新密码</text>

			<input type="password" value="" placeholder="请再次输入密码" placeholder-class="sjhinput" v-model="password" />
		</view>
		<!-- 提交 -->
		<view class="ljlogin" @click="xiuoassword">
			提交
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 验证码倒计时数据
				btnText: '获取验证码',
				btnDis: false, // 发送验证码按钮不禁用
				// 手机号
				shouji: '',
				// 验证码
				yanzhengma: '',
				// 新密码
				password: '',
				tuimgs: '',
				// 图形验证码数据
				tucode: '',
				// 默认图形验证码不显示
				iscodetu1: 1
			}
		},
		methods: {
			goYanzhengma() {
				this.goClicktu()
			},
			goClicktu() {
				var that = this
				that.$http.req.ajax({
					path: ':8066/web/lxUser/getImageCode',
					data: {
						telPhone: that.shouji,
						imagCode: that.tuimgs,
						code: '4'
					},
					afterAjax: (res) => {
						console.log(res, '1111666')

						if (res.code !== 200) {
							uni.showToast({
								title: '获取图片验证码错误',
								icon: 'none'
							})
							console.log(res.img)
							
						}
						if (res.code == 200) {
							that.iscodetu1 = 2
							console.log('进来了吗', that.iscodetu1)
							that.tuimgs = res.img
						}

					}
				})

			},
			// 验证码倒计时
			countDown() {
				// 初始化定时器
				let t = null;
				// 倒计时1分钟
				let timer = 60;
				// 按钮禁用
				this.btnDis = true;
				// 计时器清零
				clearInterval(t);
				// 按钮显示时间
				this.btnText = `${timer}s`;
				t = setInterval(() => {
					// 当倒计时完时，显示重新发送,按钮开启
					if (timer == 0) {
						clearInterval(t);
						this.btnText = "重新发送";
						this.btnDis = false;
						return;
					}
					// 实现倒计时效果
					timer--;
					this.btnText = `${timer}s`;
				}, 1000)
			},
			// 获取验证码
			getCode: function() {
				//手机号校验
				if (!(/^1[34578]\d{9}$/.test(this.shouji))) {
					console.log("手机号格式错误")
					uni.showToast({
						title: '手机号格式错误',
						icon: 'none'
					})

				} else {
					var that = this

					that.$http.req.ajax({
						path: ':8066/web/lxUser/getCodeMsg',
						data: {
							telPhone: that.shouji,
							code: 4,
							imageCode: that.tucode
						},
						afterAjax: (res) => {
							console.log(res, '1111999')
						}
					})
					// 开启倒计时
					this.countDown();
				}


			},
			// 修改密码提交
			xiuoassword() {
				var that = this
				if (that.password.length < 6 || that.password.length > 16) {
					uni.showToast({
						title: '密码长度为6~16位',
						icon: 'none'
					})
					return
				}
				that.$http.req.ajax({
					path: ':8066/web/lxUser/modifyPwd',
					data: {
						telPhone: that.shouji,
						phoneCode: that.yanzhengma,
						userPwd: that.password,
						code: '4'
					},
					afterAjax: (res) => {
						console.log(res, '更改密码')
						if (res.code = 200) {
							uni.showToast({
								title: '重置密码成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: './login'
								})
							}, 1000)
						}

					}
				})
				// var that = this

				// // 请求更改密码
				// uni.request({
				//   url:that.baseUrl+"api/user/resetpwd",
				//   method:"post",
				//   header : {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
				//   data:{
				//  mobile:that.shouji,
				//  newpassword:that.password,
				//  captcha:that.yanzhengma
				//   },
				//   success(res) {
				//   console.log(res,'更改密码')
				//   if(res.data.yanzhengma=1){
				//     uni.showToast({
				//       title:'重置密码成功',
				//       icon:'none'
				//     })
				//    setTimeout( () => {
				//       uni.navigateTo({
				//         url:'./login'
				//       })
				//     }, 1000)
				//     }

				//   }          
				// })

			}
		}
	}
</script>

<style>
	/* titile */
	.login-title {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			.login-title1 {
				font-size: 43rpx;
			}
			.login-title2 {
				width: 86rpx;
				height: 27rpx;
				background-color: #fcda22;
			}
		}

	/* 登录框手机号 */
	.shoujihao {

		display: flex;
		align-items: center;
		margin-left: 59rpx;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #F5F5F5;
		margin-top: 46rpx;
		margin-right: 45rpx;
	}

	.shoujihao text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.shoujihao image {
		width: 16rpx;
		height: 13rpx;
		margin-right: 45rpx;
		margin-left: 56rpx;
	}

	.sjhinput, .sjhinput2 {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #f5f5f5;
	}

	.yanzhengma {
		display: flex;
		margin-top: 57rpx;
		margin-left: 59rpx;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #F5F5F5;
		margin-right: 45rpx;
		font-size: 30rpx;
	}

	.yzm {
		width: 190rpx;
		font-size: 21rpx;
		position: absolute;
		top: 325rpx;
		right: 25rpx;
		z-index: 999;
	}

	.ljlogin {
		width: 627rpx;
		height: 88rpx;
		background: #fcda22;
		/* box-shadow: 0px 0px 50rpx 0px rgba(51, 0, 144, 0.3); */
		border-radius: 48rpx;
		text-align: center;
		line-height: 88rpx;
		color: #000000;
		font-size: 30rpx;
		margin-top: 70rpx;
		margin: 70rpx auto 43rpx;
	}

.tuimgs {
			background-color: #f5f5f5;
			width: 200rpx;
			height: 100rpx;
			position: absolute;
			top: 165rpx;
			right: 25rpx;
			
		}
</style>
